<!-- eslint-disable vue/require-v-for-key -->
<template>
  <div>
    <el-button @click="handleAddParams"><i class="el-icon-plus" />添加参数</el-button>
    <div class="tianji-editor full descriptionDiv">
      <div
        id="text"
        ref="tianji-editor"
        contenteditable="true"
        class="tianji-editor-container full bg-image"
        placeholder="请输入事件描述"
        @input="compile"
      />
      <div v-if="showDiv" id="show" class="showDiv" :style="pStyle">
        <div v-for="item in showArray" class="forDiv" @click="valueClick(item)">
          <div :class="['wordDiv', 'editor-checked']">{{ item.functionInfo.name }}</div>
          <div class="info">{{ item.functionInfo.description }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { propertyListAll } from '@/api/icp/labelClassDisplay'
export default {
  props: {
    value: {
      type: String,
      default: ''
    },
    behavior_field_data: {
      type: Array,
      default: () => []
    },
    entity_field: {
      type: Array,
      default: () => []
    },
    entity_type: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      // 函数组
      htmlValue: this.value,
      range: {},
      topY: 0,
      leftX: 0,
      showDiv: false,
      currentIndex: 0,
      strRect: '',
      styleRect: {},
      currentNode: {},
      textNode: {},
      rangeStartOffset: 0,
      count: 0,
      idNumber: 0,
      showArray: [],

      allEntity: [],
      timeData: ['#{A.日志时间}']
    }
  },
  computed: {
    pStyle() {
      return {
        top: this.topY + 'px',
        left: this.leftX + 'px'
      }
    }
  },
  watch: {
    behavior_field_data: {
      handler(newValue, oldValue) {
        if (newValue.length > 0) {
          this.resetSelect()
          // this.count <= 1 && this.explain_step1(this.value),
          // this.count++;
        }
      },
      immediate: true,
      deep: true
    },
    value: {
      handler(newsVal) {
        if (newsVal && !this.htmlValue) {
          this.explain_step1(newsVal)
        }
      }
    }
  },
  mounted() {
    window.n = this
    this.getDatas().then(res => {
      this.explain_step1(this.value)
    })
    this.lisenKeyDown()

    this.count++
    window.addEventListener('click', function(e) {
      if (e.target.className == 'ml5 closeBtn') {
        e.target.parentElement.remove()
      }
    }, true)
  },
  destroyed() {
    window.removeEventListener('click', function(e) {
      if (e.target.className == 'ml5 closeBtn') {
        e.target.parentElement.remove()
      }
    }, true)
  },
  methods: {
    //  添加参数
    handleAddParams(e) {
      n.$refs['tianji-editor'].focus()
      n.deleteFont()
      var l = n.get_behavior_field_html()
      return (l = l.join('')), n.insertHtmlAtCaret(l), n.deleteSign(), false
    },

    // 获取初始值
    getDatas() {
      return new Promise((resolve, reject) => {
        propertyListAll().then(res => {
          this.allEntity = res
        })
        // getDescriptionConfig().then(res => {
        //   this.showArray = res.map(item => {
        //     const json = JSON.parse(item.json)
        //     return {
        //       functionInfo: json.functionInfo,
        //       paramInfo: json.paramInfo
        //     }
        //   })
        //   resolve(this.showArray)
        // })
      })
    },
    // 点击事件
    valueClick(elm) {
      if (document.getElementsByClassName('insertFunc')) {
        for (var t = 0; t < document.getElementsByClassName('insertFunc').length; t++) {
          document
            .getElementsByClassName('insertFunc')
            [t].parentNode.removeChild(document.getElementsByClassName('insertFunc')[t])
        }
      }
      (n.showDiv = false),
      (document.getElementById('show').scrollTop = 0),
      this.createFunctionDiv(elm),
      setTimeout(function() {
        n.currentIndex = 0
        var e = document.getElementsByClassName('functionDiv')

        for (var t = 0; t < e.length; t++) {
          if (!e[t].previousSibling) return

          e[t].previousSibling &&
              e[t].previousSibling.nodeName == '#text' &&
              (e[t].previousSibling.data == '$' || e[t].previousSibling.data == '￥'
                ? e[t].parentNode.removeChild(e[t].previousSibling)
                : (e[t].previousSibling.data[e[t].previousSibling.data.length - 1] != '$' &&
                    e[t].previousSibling.data[e[t].previousSibling.data.length - 1] != '￥') ||
                  (e[t].previousSibling.data = e[t].previousSibling.data.substring(
                    0,
                    e[t].previousSibling.data.length - 1
                  ))),
          e[t].nextSibling &&
                e[t].nextSibling.nodeName == '#text' &&
                (e[t].nextSibling.data == '$' || e[t].nextSibling.data == '￥'
                  ? e[t].parentNode.removeChild(e[t].nextSibling)
                  : (e[t].nextSibling.data[e[t].nextSibling.data.length - 1] != '$' &&
                      e[t].nextSibling.data[e[t].nextSibling.data.length - 1] != '￥') ||
                    (e[t].nextSibling.data = e[t].nextSibling.data.substring(0, e[t].nextSibling.data.length - 1)),
                e[t].nextSibling &&
                  e[t].nextSibling.data === ' ' &&
                  e[t].nextSibling.nextSibling.data == '￥' &&
                  e[t].parentNode.removeChild(e[t].nextSibling.nextSibling))
        }
      }, 100)
    },
    // 按键按下
    lisenKeyDown() {
      document.onkeydown = function(e) {
        if (n.$refs['tianji-editor'] && n.$refs['tianji-editor'] == document.activeElement) {
          var t = e || event || window.event || arguments.callee.caller.arguments[0]
          // 监听$按键
          // if (t && t.code == 'Digit4' && t.shiftKey == 1) {
          //   n.deleteFont(),
          //   window.getSelection && (n.range = window.getSelection().getRangeAt(0)),
          //   (n.currentNode = n.range.startContainer),
          //   (n.rangeStartOffset = n.range.startOffset),
          //   e.target.getClientRects()[0],
          //   n.insertHtmlAtCaret('<span class="insertFunc" style="position:relative"></span>')
          //   var i = 0
          //   var o = 0
          //
          //   if (document.getElementsByClassName('insertFunc')) {
          //     for (var a = 0; a < document.getElementsByClassName('insertFunc').length; a++) {
          //       i =
          //         document.getElementsByClassName('insertFunc')[a].offsetTop -
          //         document.getElementsByClassName('insertFunc')[a].parentNode.offsetTop
          //       o = document.getElementsByClassName('insertFunc')[a].offsetLeft
          //     }
          //     n.topY = i
          //     o >= n.$refs['tianji-editor'].offsetWidth - 250
          //       ? (n.leftX = n.$refs['tianji-editor'].offsetWidth - 250)
          //       : (n.leftX = o),
          //     (n.showDiv = true)
          //     n.deleteSign()
          //   }
          // }
          // 监听#按键
          if (t && t.code == 'Digit3' && t.shiftKey == 1) {
            n.deleteFont()
            var l = n.get_behavior_field_html()
            return (l = l.join('')), n.insertHtmlAtCaret(l), n.deleteSign(), false
          }
          if (t && t.keyCode == 38) {
            return (
              n.currentIndex > 0 &&
                (n.currentIndex--, n.currentIndex >= 8 && (document.getElementById('show').scrollTop -= 31)),
              !(n.showArray.length > 0)
            )
          }
          if (t && t.keyCode == 40) {
            return (
              n.currentIndex < n.showArray.length - 1 &&
                (n.currentIndex++, n.currentIndex >= 9 && (document.getElementById('show').scrollTop += 31)),
              !(n.showArray.length > 0)
            )
          }
          if (t && t.keyCode == 13) {
            return (
              setTimeout(function() {
                n.showDiv && n.valueClick(n.showArray[n.currentIndex])
              }, 300),
              false
            )
          }
          t && t.keyCode == 8 && n.showDiv && (n.showDiv = false)
        }
      }
    },
    // 获取时间html
    get_datetime_html(e) {
      var t = []
      e
        ? (t[0] = '<select class="entitySelect datetime" value="' + e + '">')
        : ((t[0] = '<select class="entitySelect datetime">'),
        t.push('<option selected="selected" disabled="disabled"  style="display: none" value="">请选择</option>'))
      for (var i = 0; i < this.timeData.length; i++) {
        t.push('<option>' + this.timeData[i] + '</option>')
      }
      return (
        this.timeData.length == 0 &&
          t.push('<option selected="selected" disabled="disabled"  style="display: none" value="">请选择</option>'),
        t.push('</select>'),
        t
      )
    },
    // 获取行为列表
    get_behavior_field_html(e, t) {
      var i = []
      ;(i[0] = e
        ? '<div contenteditable="false" class="inline functionDiv">  <select class="entitySelect behavior_field" value="' + e + '">'
        : '<div contenteditable="false" class="inline functionDiv"> <select class="entitySelect behavior_field">'),
      i.push('<option selected="selected" disabled="disabled"  style="display: none" value="">请选择</option>')

      for (var n = 0; n < this.behavior_field_data.length; n++) {
        (t == 'function' && this.behavior_field_data[n].indexOf('.') == -1) ||
          (this.behavior_field_data[n] === e
            ? i.push('<option selected = "selected" >' + this.behavior_field_data[n] + '</option>')
            : i.push('<option>' + this.behavior_field_data[n] + '</option>'))
      }
      $('.closeBtn')
        .off('click')
        .on('click', function() {
          this.parentElement.remove(),
          n.$nextTick(function() {
            n.compile()
          })
        })
      return i.push('</select><a href="#" class="ml5 closeBtn"></a></div>'), i
    },
    // 按照行为选择
    get_entity_type_html(e) {
      var t = []
      ;(t[0] = e
        ? '<select class="entitySelect entity_type" value="' + e + '">'
        : '<select class="entitySelect entity_type">'),
      t.push('<option selected="selected" disabled="disabled"  style="display: none" value="">请选择</option>')
      for (var i = 0; i < this.entity_type.length; i++) {
        this.entity_type[i].title === e
          ? t.push('<option selected = "selected" >' + this.entity_type[i].title + '</option>')
          : t.push('<option>' + this.entity_type[i].title + '</option>')
      }
      return t.push('</select>'), t
    },
    get_entity_field_html(e, t, i) {
      var n = []
      if (
        (this.$tools.isNull(i) && (i = this.entity_field),
        e
          ? ((n[0] = '<select class="entitySelect entity_field" value="' + e + '"'),
          t == -1 && (n[0] += ' multiple="multiple" id="entity_field' + this.createNewId() + '"'),
          (n[0] += '>'))
          : ((n[0] = '<select class="entitySelect entity_field"'),
          t == -1 && (n[0] += ' multiple="multiple" id="entity_field' + this.createNewId() + '"'),
          (n[0] += '>'),
          t == -1
            ? n.push('<option disabled="disabled"  style="display: none" value="">请选择</option>')
            : n.push(
              '<option selected="selected" disabled="disabled"  style="display: none" value="">请选择</option>'
            )),
        t != -1)
      ) {
        for (var o = 0; o < i.length; o++) {
          e && e.indexOf(i[o].name) != -1
            ? n.push('<option selected = "selected" >#{' + i[o].name + '}</option>')
            : n.push('<option>#{' + i[o].name + '}</option>')
        }
      } else {
        for (o = 0; o < i.length; o++) {
          n.push('<option value="#{' + i[o].name + '}">#{' + i[o].name + '}</option>')
        }
      }
      return n.push('</select>'), n
    },
    get_constant_html(e, t) {
      var i = []
      t.prefix && i.push(t.prefix),
      e
        ? i.push('<select class="entitySelect constant" value="' + e + '">')
        : (i.push('<select class="entitySelect constant">'),
        i.push('<option selected="selected" disabled="disabled"  style="display: none" value="">请选择</option>'))
      for (var n = 0; n < t.default.length; n++) {
        t.default[n].key == e
          ? i.push('<option selected = "selected" value="' + t.default[n].key + '">' + t.default[n].value + '</option>')
          : i.push('<option value="' + t.default[n].key + '">' + t.default[n].value + '</option>')
      }
      return i.push('</select>'), i
    },
    explain_step1(e) {
      if (!this.$refs['tianji-editor']) return
      if (
        ((this.$refs['tianji-editor'].innerHTML = ''), this.$refs['tianji-editor'].focus(), this.$tools.isNull(e) == 0)
      ) {
        var t = []
        var i = this.$tools.getFunction(e, '$', ')')
        if (i.length == 0 && this.$tools.isNull(e) == 0) {
          return this.explainNoFunction(e), !0
        }
        for (var n = 0, o = 0; o < i.length; o++) {
          t.push(e.substring(n, i[o].startIndex)),
          t.push(e.substring(i[o].startIndex, i[o].endIndex)),
          (n = i[o].endIndex)
        }
        for (var a = t.length; a >= 0; a--) t[a] == '' && t.splice(a, 1)
        i[i.length - 1].endIndex != e.length - 1 && t.push(e.substring(i[i.length - 1].endIndex, e.length))
        for (var l = 0; l < t.length; l++) this.explain_step2(t[l])
      }
    },
    explain_step2(e) {
      if (e) {
        e.indexOf('$')
        var t = ''
        var i = ''
        if (e.indexOf('$') != -1) {
          var n = this.$tools.selectStr(e, '$')

          if (n[0] == 0) {
            t = e.substring(n[0], this.findNear(e, 0, ')') + 1)
            i = e.substring(1, this.findNear(e, 0, '('))

            for (var o = 0; o < this.showArray.length; o++) {
              this.showArray[o].functionInfo.name == i &&
                this.explainFunction(JSON.parse(JSON.stringify(this.showArray))[o], t)
            }
          }
        } else this.explainNoFunction(e)
      }
    },
    explainFunction(e, t) {
      for (var i = t.indexOf('('), n = t.substring(i + 1, t.length).split(','), o = n.length - 1; o >= 0; o--) {
        n[o].indexOf('delete') != -1 && n.splice(o, 1)
      }
      for (var a = 0; a < n.length; a++) {
        e.paramInfo[a].value = n[a].replace(')', '')
      }
      this.createFunctionDiv(e)
    },
    explainNoFunction(e) {
      var t = e && this.analysisText(e) && this.analysisText(e).join('')
      this.insertHtmlAtCaret(t)
    },
    // 插入结构
    insertHtmlAtCaret(e) {
      var t, i
      if (window.getSelection) {
        if ((t = window.getSelection()).getRangeAt && t.rangeCount) {
          (i = t.getRangeAt(0)).deleteContents()
          var n = document.createElement('div')
          n.innerHTML = e
          for (var o, a, l = document.createDocumentFragment(); (o = n.firstChild);) {
            a = l.appendChild(o)
          }
          i.insertNode(l),
          a && ((i = i.cloneRange()).setStartAfter(a), i.collapse(!0), t.removeAllRanges(), t.addRange(i))
        }
      } else {
        document.selection && document.selection.type != 'Control' && document.selection.createRange().pasteHTML(e)
      }
    },
    deleteSign() {
      setTimeout(function() {
        var e = document.getElementsByClassName('entitySelect')
        if (e) {
          for (var t = 0; t < e.length; t++) {
            e[t].previousSibling &&
              e[t].previousSibling.nodeName == '#text' &&
              (e[t].previousSibling.data == '#'
                ? e[t].parentNode.removeChild(e[t].previousSibling)
                : e[t].previousSibling.data[e[t].previousSibling.data.length - 1] == '#' &&
                  (e[t].previousSibling.data = e[t].previousSibling.data.substring(
                    0,
                    e[t].previousSibling.data.length - 1
                  )))
            e[t].nextSibling &&
              e[t].nextSibling.nodeName == '#text' &&
              (e[t].nextSibling.data == '#'
                ? e[t].parentNode.removeChild(e[t].nextSibling)
                : e[t].nextSibling.data[e[t].nextSibling.data.length - 1] == '#' &&
                  (e[t].nextSibling.data = e[t].nextSibling.data.substring(0, e[t].nextSibling.data.length - 1)))
          }
        }
        n.resetRange()
        n.compile()
        const html = $('#text').html()
        n.$emit('input', { value: this.htmlValue, html })
      }, 100)
    },
    // 删除字
    deleteFont() {
      $('.tianji-editor-container font').length > 0 &&
        ($('.tianji-editor-container font').before($('.tianji-editor-container font').text()),
        $('.tianji-editor-container font').remove())
    },
    resetRange() {
      var e = window.getSelection()
      var t = e.getRangeAt(0)
      var i = t.startContainer
      var n = t.startOffset
      t.setStart(i, n), t.collapse(!0), e.removeAllRanges(), e.addRange(t)
    },
    compile() {
      for (var e = '', t = this.$refs['tianji-editor'].childNodes, i = 0; i < t.length; i++) {
        if (t[i].nodeName == '#text') {
          t[i].nodeValue != ',显示条数' ? (e += t[i].nodeValue) : (e += ',')
        } else if (t[i].nodeName == 'SELECT') {
          if (t[i].multiple) {
            for (var n = t[i], o = [], a = 0; a < n.length; a++) {
              n.options[a].selected && o.push(n[a].value)
            }
            for (var l = o.length; l >= 0; l--) {
              this.$tools.isNull(o[l]) && o.splice(l, 1)
            }
            e += '[' + o.join(';') + ']'
          } else e += t[i].value
        } else if (t[i].nodeName == 'DIV') {
          for (l = 0; l < t[i].childNodes.length; l++) {
            if (t[i].childNodes[l].nodeName == 'SELECT') {
              if (t[i].childNodes[l].multiple) {
                for (n = t[i].childNodes[l], o = [], a = 0; a < n.length; a++) {
                  n.options[a].selected && o.push(n[a].value)
                }
                n.nextSibling.setAttribute('title', o.join())
                for (var s = o.length; s >= 0; s--) {
                  this.$tools.isNull(o[s]) && o.splice(s, 1)
                }
                e += '[' + o.join(';') + '],'
              } else e += $(t[i].childNodes[l]).val()
            } else {
              t[i].childNodes[l].nodeName == '#text' &&
                t[i].childNodes[l].nodeValue != ',显示条数' &&
                (e += t[i].childNodes[l].nodeValue)
            }
          }
        }
      }

      this.htmlValue = e
      const html = $('#text').html()

      // if ( this.htmlValue.length >= 500) {
      //   $('#text').html(html.slice(0, 500))
      //   $('#text').blur()
      //   this.$message.warning('不得超过500个字符')
      // }
      this.$emit('input', { value: this.htmlValue, html })
    },
    findNear(e, t, i) {
      for (var n = t; n < e.length; n++) if (e[n] == i) return n
      return 0
    },
    createFunctionDiv(e) {
      var t
      var i = false
      var o = ['<div class="functionDiv" contenteditable="false">$', e.functionInfo.name + '(']
      var a = []
      var l = []
      for (var s in e.paramInfo) {
        e.paramInfo[s].type.dataType == 'datetime'
          ? (o = o.concat(this.get_datetime_html(e.paramInfo[s].value)))
          : e.paramInfo[s].type.fieldType == 'behavior_field'
            ? (o = o.concat(this.get_behavior_field_html(e.paramInfo[s].value, 'function')))
            : e.paramInfo[s].type.fieldType == 'entity_type'
              ? ((i = !0),
              (o = o.concat(this.get_entity_type_html(e.paramInfo[s].value))),
              (a = this.getEntity(e.paramInfo[s].value)))
              : e.paramInfo[s].type.fieldType == 'entity_field'
                ? (e.paramInfo[s].limit == -1 &&
              (e.paramInfo[s].value &&
                (t = e.paramInfo[s].value.substring(0, e.paramInfo[s].value.length - 1).substring(1)),
              t && (l = t.split(';'))),
                (o = o.concat(this.get_entity_field_html(e.paramInfo[s].value, e.paramInfo[s].limit, a))))
                : e.paramInfo[s].type.fieldType == 'constant' &&
            (o = o.concat(this.get_constant_html(e.paramInfo[s].value, e.paramInfo[s]))),
        o.push(',')
      }
      o.pop(), o.push(')'), o.push('<a href="#" class="closeBtn"></a>'), o.push('</div>'), o.push('&nbsp;')
      var r = o
      if (((o = o.join('')), this.count != 0)) {
        try {
          this.$refs['tianji-editor'].focus(),
          window
            .getSelection()
            .getRangeAt(0)
            .setStart(this.currentNode, this.rangeStartOffset)
        } catch (e) {}
      }
      for (this.insertHtmlAtCaret(o), i && this.entity_type_Control_Function(), s = 0; s < r.length; s++) {
        if (r[s].indexOf('multiple') != -1) {
          var d = this.getId(r[s])
          var selectElement = $(`#${d}`)
          selectElement.multipleSelect({
            selectAll: false,
            minimumCountSelected: r.length,
            placeholder: l ? l.join(',') : '请选择实体'
          })
          if (l) {
            selectElement.multipleSelect('setSelects', l)
          }
        }
      }
      $('.closeBtn')
        .off('click')
        .on('click', function() {
          this.parentElement.remove(),
          n.$nextTick(function() {
            n.compile()
          })
        }),
      n.titleAdd()
    },
    getId(e) {
      for (var t = 0; t < e.length; t++) {
        if (t > 1 && e[t - 1] == 'i' && e[t] == 'd') {
          var i = this.$tools.findNear(e, t, '"')
          var n = this.$tools.findNear(e, i + 1, '"')
          return e.substring(i + 1, n)
        }
      }
    },
    analysisText(e) {
      if (e.indexOf('#') == -1) return [e]
      for (var t = [], i = '', n = this.countJing(e)['#'], o = 0, a = 0; a < e.length; a++) {
        if (e[a] == '#') {
          var l = this.findLastJing(e, a)
          !1 === l ? t.push(e.substring(0, a)) : t.push(l)
          for (var s = a; s < e.length; s++) {
            if (e[s] === '}') {
              i = e.substring(a, s + 1)
              break
            }
          }
          (t = t.concat(this.get_behavior_field_html(i))), o++
        }

        if (o == n) {
          for (var r = e.length; r >= 0; r--) {
            if (e[r] == '}') return t.push(e.substring(r + 1, e.length)), t
          }
        }
      }
      $('.closeBtn')
        .off('click')
        .on('click', function() {
          this.parentElement.remove(),
          n.$nextTick(function() {
            n.compile()
          })
        })
    },
    countJing(e) {
      var t
      var i = {}
      for (t = 0; t < e.length; t++) {
        var n = e.charAt(t)
        i[n] ? i[n]++ : (i[n] = 1)
      }
      return i
    },
    findLastJing(e, t) {
      for (var i = t; i >= 0; i--) {
        if (e[i] == '}') return e.substring(i + 1, t)
      }
      return false
    },
    resetSelect() {
      if (!this.$refs['tianji-editor']) return
      for (var e = this.$refs['tianji-editor'].childNodes, t = [], i = [], n = 0; n < e.length; n++) {
        if ((e[n], ((t = []), (i = []), e[n].nodeName == 'SELECT'))) {
          this.resetSelect_Obj(e, n, t, i, false)
        } else if (e[n].nodeName == 'DIV') {
          for (var o in e[n].childNodes) {
            this.resetSelect_Obj(e[n].childNodes, o, t, i, false, 'function')
          }
        }
      }
    },
    resetSelect_Obj(e, t, i, n, o, a) {
      if (e[t].nodeName == 'SELECT') {
        if (e[t].className.indexOf('behavior_field') != -1) {
          for (var l = $(e[t]).val(), s = 0; s < this.behavior_field_data.length; s++) {
            l === this.behavior_field_data[s] && (o = !0)
          }
          o == 0 &&
            i.push('<option selected="selected" disabled="disabled"  style="display: none" value="">请选择</option>')
          for (var r = 0; r < this.behavior_field_data.length; r++) {
            if (a == 'function') {
              if (this.behavior_field_data[r].indexOf('.') == -1) continue
              i.push('<option>' + this.behavior_field_data[r] + '</option>')
            } else {
              i.push('<option>' + this.behavior_field_data[r] + '</option>')
            }
          }
          if (((e[t].innerHTML = i.join('')), o == 0)) {
            (e[t].value = ''), e[t].setAttribute('value', '')
          } else {
            for (var d in (e[t].setAttribute('value', l), e[t].childNodes)) {
              e[t].childNodes[d].innerText == l && (e[t][d].selected = !0)
            }
            for (r = 0; r < e[t].childNodes.length; r++) {
              $(e[t].childNodes[r]).val() == '' && e[t].removeChild(e[t].childNodes[r])
            }
          }
          (o = false), (i = [])
        } else if (e[t].className.indexOf('datetime') != -1) {
          for (l = $(e[t]).val(), s = 0; s < this.timeData.length; s++) {
            l === this.timeData[s] && (o = !0)
          }
          for (
            o == 0 &&
              n.push('<option selected="selected" disabled="disabled"  style="display: none" value="">请选择</option>'),
            r = 0;
            r < this.timeData.length;
            r++
          ) {
            n.push('<option>' + this.timeData[r] + '</option>')
          }
          if (((e[t].innerHTML = n.join('')), o == 0)) {
            (e[t].value = ''), e[t].setAttribute('value', '')
          } else {
            for (var d in (e[t].setAttribute('value', l), e[t].childNodes)) {
              e[t].childNodes[d].innerText == l && (e[t][d].selected = !0)
            }
            for (r = 0; r < e[t].childNodes.length; r++) {
              e[t].childNodes[r].value == '' && e[t].removeChild(e[t].childNodes[r])
            }
          }
          (o = false), (n = [])
        }
      }
    },
    createNewId(e) {
      return this.idNumber++
    },
    entity_type_Control_Function() {
      var e = this.$refs['tianji-editor'].childNodes
      for (var t in e) {
        if (e[t].nodeName == 'DIV') {
          for (var i in e[t].childNodes) {
            if (e[t].childNodes[i].nodeName == 'SELECT' && e[t].childNodes[i].className.indexOf('entity_type') != -1) {
              for (var o = i; o < e[t].childNodes[i].length; o++) {
                if (e[t].childNodes[o].nodeName == 'SELECT') {
                  if (
                    (e[t].childNodes[o].setAttribute('index', t),
                    e[t].childNodes[o].nodeName == '#text' && e[t].childNodes[o].nodeValue == ')')
                  ) {
                    break
                  }
                  e[t].childNodes[i].onchange == null &&
                    (e[t].childNodes[i].onchange = function(e) {
                      for (
                        var t = $(this).val(),
                          i = n.getEntity(t),
                          o = $(this)
                            .parent()
                            .find('.entity_field'),
                          a = 0;
                        a < o.length;
                        a++
                      ) {
                        if (o[a].nodeName == 'SELECT') {
                          $(o[a])
                            .children()
                            .remove()
                          var l = []
                          o[a].getAttribute('multiple') ||
                            l.push(
                              '<option selected="selected" disabled="disabled"  style="display: none" value="">请选择</option>'
                            )
                          for (var s = 0; s < i.length; s++) {
                            l.push('<option>#{' + i[s].name + '}</option>')
                          }
                          o[a].innerHTML = l.join('')

                          if (o[a].nodeName == 'SELECT' && o[a].getAttribute('multiple') == 'multiple') {
                            const temp = o[a].id

                            $(`#${temp}`).multipleSelect('destroy')
                            $(`#${temp}`).multipleSelect({
                              selectAll: false
                            })
                          }
                        }
                      }
                    })
                }
              }
            }
          }
        }
      }
    },
    getEntity(e) {
      for (var t = 0; t < this.entity_type.length; t++) {
        if (this.entity_type[t].title == e) {
          for (var i = 0; i < this.allEntity.length; i++) {
            if (this.allEntity[i].sort == this.entity_type[t].sort) {
              return this.allEntity[i].data
            }
          }
        }
      }
    },

    titleAdd() {
      for (var e = this.$refs['tianji-editor'].childNodes, t = 0; t < e.length; t++) {
        if (e[t].nodeName == 'DIV') {
          for (var i = 0; i < e[t].childNodes.length; i++) {
            if (e[t].childNodes[i].nodeName == 'SELECT' && e[t].childNodes[i].multiple) {
              for (var n = e[t].childNodes[i], o = [], a = 0; a < n.length; a++) {
                n.options[a].selected && o.push(n[a].value)
              }
              n.nextSibling.setAttribute('title', o.join())
            }
          }
        }
      }
    },
    selectDisabled() {
      if ($('.functionDiv')) {
        for (var e = 1, t = 0; t < $('.functionDiv').length; t++) {
          if ($('.functionDiv')[t].children) {
            for (var i = 0, n = 0; n < $('.functionDiv')[t].children.length; n++) {
              $('.functionDiv')[t].children[n].value == '' ? ($('.functionDiv')[t].style.border = '1px solid red') : i++
            }
            $('.functionDiv')[t].children.length == i
              ? (($('.functionDiv')[t].style.border = 'none'), (e = 1))
              : (e = 2)
          }
        }
        return e
      }
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .inline{
  display: inline-block;
}
.descriptionDiv {
  margin-top: 12px;
  margin-bottom: 16px;
  height: 172px;
  width: 100%;
  position: relative;
  border: 1px solid #dcdfe6;
  overflow: auto;
}

.tianji-editor {
  .tianji-editor-container {
    min-height: 170px;
    overflow-y: auto;
    padding: 8px;
    position: relative;
    text-align: left;
    font-size: 14px;
    line-height: 32px;
    &:empty::before {
      content: attr(placeholder);
      color: #c0c4cc;
    }
    .entitySelect {
      cursor: pointer;
      margin: 0 4px 0 4px;
      border: 1px solid transparent !important;
    }
  }
  .showDiv {
    z-index: 1;
    height: auto;
    background: #eee;
    position: absolute;
    border: 1px solid #e6e9ed;
    font-size: 14px;
    max-height: 300px;
    overflow-y: auto;
    position: absolute;
    .forDiv {
      display: table-row;
    }
    .editor-checked {
      background-color: #cad6fa;
    }
    .wordDiv {
      display: table-cell;
      cursor: pointer;
      text-align: left;
      font-size: 14px;
      padding: 3px 3px 0 3px;
      line-height: 26px;
      border: 1px solid transparent;
    }
  }
}
::v-deep {
  .entitySelect {
    cursor: pointer;
    margin: 0 4px 0px 4px;
    border: 1px solid transparent !important;
  }
  .behavior_field {
    height: 32px;
  }
  .ms-choice {
    background-color: #ecf3fc;
  }
  .functionDiv {
    border-radius: 30px;
    margin-bottom: 5px;
    display: inline-block;
    background: #ecf3fc;
    padding: 0 0 0 12px;
    color: #505255;

    width: fit-content;
  }

  select {
    background: #ecf3fc;
    border: none;
    border-radius: 4px;
    font-size: 14px;
    color: #505255;
  }
  .ms-drop ul > li {
    padding: 1px 12px;
    label {
      height: 22px;
      input[type='checkbox'] {
        margin-top: 8px;
      }
    }
  }
  .closeBtn {
    width: 13px;
    height: 13px;
    margin: auto;
    position: relative;
    margin-left: 32px;
    &.ml5{
      margin-left: 20px;
    }
    &::after {
      content: '';
      position: absolute;
      height: 10px;
      width: 2px;
      top: 3px;
      right: 15px;
      background: #505255;
      transform: rotate(-45deg);
    }
    &::before {
      content: '';
      position: absolute;
      height: 10px;
      width: 2px;
      top: 3px;
      right: 15px;
      background: #505255;
      transform: rotate(45deg);
    }
  }
}
</style>
